<template>
	<div id="SellerReturn">
		<x-header :left-options="{showBack: false}" :title="typeName" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="goods-wrap">
			<div class="title vux-1px-b">
				<img src="../assets/images/home/icon_beizhu.jpg" alt="" />
				<h2>{{goods_return.member_nickname}}</h2>
			</div>
			<div class="content vux-1px-b">
				<img v-if="goods_return.goods_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
				<img v-else :src="'/los/uploads/thumb/goods/' + goods_return.goods_id + '_76X76.jpeg'" alt="" />
				<div class="desc">
					<h2>{{goods_return.goods_name}}</h2>
					<p class="money">成交金额 <span>￥{{goods_order.pay_money}}</span></p>
					<p class="timer">成交时间：{{common.timestampToTime(goods_order.order_time)}}</p>
				</div>
			</div>
			<div class="return-money">
				<span>退款金额：</span><i>￥{{goods_return.return_money}}</i>
			</div>
		</div>
		<div class="reason-wrap">
			<h2>申请退货理由</h2>
			<p>{{goods_return.return_cause}}</p>
			<ul v-if="goods_return.return_imgs != ''" class="reason_img">
				<li v-for="item in goods_return.return_imgs"><img :src="item" alt="" /></li>
			</ul>
		</div>
		<div class="reason-wrap" v-if="typeName == '同意退货'">
			<h2 class="vux-1px-b">退货地址</h2>
			<div class="vux-1px-b">
				<x-input title="收货人：" v-model="receiver_name" type="text" placeholder="请输入收件人姓名" :show-clear="false"></x-input>
			</div>
			<x-input title="联系电话：" v-model="receiver_tel" type="number" :show-clear="false" placeholder="请输入联系电话"></x-input>
			<group class="address">
				<x-address class="block" title="" @on-shadow-change="onShadowChange" raw-value :list="addressData" value-text-align="left" label-align="justify" placeholder="请选择地址">
				</x-address>
			</group>
			<x-input title="收货地址：" v-model="receiver_address" type="text" :show-clear="false" placeholder="请输入详细地址如街道、社区"></x-input>
		</div>
		<div class="return-address" v-if="goods_return.receiver_name != null">
			<h2 class="vux-1px-b">退货地址</h2>
			<div class="info">
				<p class="receive-name">收货人：{{goods_return.receiver_name}} <span>{{goods_return.receiver_tel}}</span></p>
				<p class="receive-add">{{goods_return.receiver_province}}{{goods_return.receiver_city}}{{goods_return.receiver_county}}{{goods_return.receiver_address}}</p>
			</div>
		</div>
		<!--<div class="check" @click="reason = true">
			<span>拒绝退货理由</span>
			<i class="re-icon icon-right"></i>
			<b v-model="cause" class="reason">{{cause}}</b>
		</div>-->
		<!--<div class="return-record">
			<h2 class="vux-1px-b">退款记录</h2>
			<tr class="title">
				<th class="name">事件名称</th>
				<th class="reason">理由说明</th>
				<th class="time">时间</th>
			</tr>
			<tr class="desc">
				<td class="name">买家-申请退货</td>
				<td class="reason">没别的意思就想退货了</td>
				<td class="time">09-03 14:44</td>
			</tr>
		</div>-->
		<actionsheet v-model="agreeAlert" :menus="agreeCheck" @on-click-menu-delete="returnGoods" :close-on-clicking-mask="false" show-cancel class="seller-agree"></actionsheet>
		<actionsheet v-model="moneyAlert" :menus="moneyCheck" @on-click-menu-delete="returnMoney" :close-on-clicking-mask="false" show-cancel class="seller-agree"></actionsheet>
		<actionsheet v-model="refuseAlert" :menus="refuseCheck" @on-click-menu-delete="refuseGoods" :close-on-clicking-mask="false" show-cancel class="seller-agree"></actionsheet>
		<button v-if="typeName == '同意退货'" @click="agreeAlert = !agreeAlert">同意退货</button>
		<button v-if="typeName == '确认退款'" @click="moneyAlert = !moneyAlert">同意退款</button>
		<button v-if="typeName == '拒绝退货'" @click="refuseAlert = !refuseAlert">拒绝退货</button>
		<toast v-model="success" type="text" width='4.2rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, Actionsheet, ChinaAddressData, Group, XAddress, XInput, Toast } from 'vux'
	export default {
		data() {
			return {
				cause: '请选择拒绝理由',
				reason: false,
				moneyAlert: false,
				agreeAlert: false,
				refuseAlert: false,
				success: false,
				status: true,
				goodsOrder: [],
				auctionOrder: [],
				return_record: [],
				receiveInfo: {},
				goods_return: {},
				goods_order: {},
				receiver_name: '',
				receiver_address: '',
				typeName: '',
				street: '',
				msg: '',
				agreeCheck: {
					'title.noop': '同意后，请等到买家退货待收到买家退货后再确认退款',
					delete: '<span style="color:#a30000">同意退货</span>'
				},
				moneyCheck: {
					'title.noop': '同意后，货款将立即退还给买家请在收到买家退货后再退款给买家',
					delete: '<span style="color:#a30000">同意退款</span>'
				},
				refuseCheck: {
					'title.noop': '是否同意拒绝退货',
					delete: '<span style="color:#a30000">拒绝退货</span>'
				},
				addressData: ChinaAddressData,
				//				addressValue: ['河南省', '郑州市', '二七区'],
				receiver_province: '',
				receiver_city: '',
				receiver_county: '',
				receiver_tel: '',
				return_sn: ''
			}
		},
		components: {
			XHeader,
			Actionsheet,
			XInput,
			Toast,
			ChinaAddressData,
			Group,
			XAddress
		},
		mounted() {
			this.getReturnDetail();
		},
		methods: {
			getReturnDetail: function() {
				this.return_sn = this.$route.params.return_sn;
				this.typeName = this.$route.query.typeName;
				this.$http({
					method: 'GET',
					url: '/los/api/seller/goods_return_details.json?return_sn=' + this.return_sn,
					data: ''
				}).then((result) => {
					this.goods_return = result.data.data.goods_return;
					this.goods_order = this.goods_return.goods_order;
				}).catch((err) => {

				})
			},
			//同意退货
			returnGoods: function() {
				var params = {
					return_state: 1,
					return_sn: this.return_sn,
					return_reply: '',
					receiver_name: this.receiver_name,
					receiver_province: this.receiver_province,
					receiver_city: this.receiver_city,
					receiver_county: this.receiver_county,
					receiver_address: this.receiver_address,
					receiver_tel: this.receiver_tel
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/seller/goods_return.json',
					data: params
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg;
					if(result.data.code == 1) {
						location.href = '#/SellerOrderInfo/order_sn/' + this.goods_order.order_sn + '?return_sn=' + this.return_sn;
					}
				}).catch((err) => {

				})
			},

			//拒绝退货
			refuseGoods: function() {
				var params = {
					return_state: 0,
					return_sn: this.return_sn,
					return_reply: '',
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/seller/goods_return.json',
					data: params
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg;
					if(result.data.code == 1) {
						setTimeout(() => {
							location.href = '#/SellerOrderInfo/order_sn/' + this.goods_order.order_sn + '?return_sn=' + this.return_sn;
						}, 500)
					}
				}).catch((err) => {

				})
			},

			//获取省市县信息
			onShadowChange: function(ids, names) {
				this.receiver_province = names[0];
				this.receiver_city = names[1];
				this.receiver_county = names[2];
			},

			returnMoney: function() {
				var params = {
					return_sn: this.return_sn
				}
				this.$http({
					method: 'PUT',
					url: '/los/api/seller/goods_return.json',
					data: params
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg;
					if(result.data.code == 1) {
						setTimeout(() => {
							location.href = '#/SellerOrderInfo/order_sn/' + this.goods_order.order_sn + '?return_sn=' + this.return_sn;
						}, 500)
					}
				}).catch((err) => {

				})
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.goods-wrap {
		margin-top: 0.34rem;
		width: 100%;
		padding: 0 0.26rem;
		background: #fff;
		overflow: hidden;
	}
	
	.goods-wrap .title {
		overflow: hidden;
		height: 1.14rem;
		line-height: 1.14rem;
	}
	
	.goods-wrap .title img {
		float: left;
		width: 0.37rem;
		height: 0.37rem;
		margin-top: 0.38rem;
		margin-right: 0.21rem;
	}
	
	.goods-wrap .title h2 {
		float: left;
	}
	
	.goods-wrap .content {
		overflow: hidden;
		padding: 0.26rem 0;
	}
	
	.goods-wrap .content img {
		float: left;
		width: 1.73rem;
		height: 1.73rem;
		border-radius: 0.05rem;
	}
	
	.goods-wrap .content .desc {
		float: left;
		margin-left: 0.21rem;
		width: 75%;
		overflow: hidden;
	}
	
	.goods-wrap .content .desc h2 {
		font-size: 0.37rem;
		color: #222;
		font-weight: normal;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.goods-wrap .content .desc .money {
		margin-top: 0.32rem;
		font-size: 0.32rem;
		color: #666;
		line-height: 0.48rem;
	}
	
	.goods-wrap .content .desc .money span {
		color: #222;
	}
	
	.goods-wrap .content .desc .timer {
		font-size: 0.32rem;
		color: #666;
		line-height: 0.48rem;
	}
	
	.goods-wrap .return-money {
		float: left;
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		overflow: hidden;
	}
	
	.goods-wrap .return-money span {
		float: left;
		font-size: 0.4rem;
		color: #222;
	}
	
	.goods-wrap .return-money i {
		float: left;
		color: #DD2828;
		font-size: 0.37rem;
		font-style: normal;
	}
	
	.check {
		overflow: hidden;
		margin-top: 0.26rem;
		height: 1.3rem;
		line-height: 1.3rem;
		background: #fff;
		padding: 0 0.26rem;
	}
	
	.check span {
		float: left;
		font-size: 0.4rem;
		color: #222;
	}
	
	.check .money {
		color: #DD2828;
		font-size: 0.37rem;
		margin-left: 0.34rem;
		font-style: normal;
	}
	
	.check .re-icon {
		float: right;
		margin-left: 0.18rem;
		margin-top: 0.45rem;
	}
	
	.check .reason {
		float: right;
		font-weight: normal;
		font-size: 0.37rem;
		color: #666;
	}
	
	.check b {
		font-size: 0.37rem;
		color: #666;
		margin-left: 0.32rem;
		font-weight: normal;
	}
	
	.reason-wrap {
		padding: 0 0.26rem;
		background: #fff;
		margin-top: 0.26rem;
	}
	
	.reason-wrap h2 {
		font-size: 0.4rem;
		color: #222;
		height: 1.06rem;
		line-height: 1.06rem;
	}
	
	.reason-wrap p {
		font-size: 0.37rem;
		color: #666;
		line-height: 0.56rem;
		padding-bottom: 0.26rem;
	}
	
	.reason-wrap p span {
		color: #333;
	}
	
	.reason-wrap input {
		height: 0.88rem;
		line-height: 0.88rem;
		font-size: 0.37rem;
	}
	
	.reason-wrap p b {
		font-weight: normal;
		margin-left: 0.53rem;
		color: #333;
	}
	
	.reason-wrap .reason_img {
		overflow: hidden;
		padding-bottom: 0.26rem;
	}
	
	.reason-wrap .reason_img li {
		width: 3rem;
		height: 3rem;
		float: left;
		margin-right: 0.24rem;
		position: relative;
	}
	
	.reason-wrap .reason_img li img {
		width: 100%;
		height: 100%;
		border-radius: 0.13rem;
	}
	
	.reason-wrap .reason_img li:last-child {
		margin-right: 0;
	}
	
	#SellerReturn .reason-wrap .receive {
		padding-bottom: 0.26rem;
	}
	
	#SellerReturn .reason-wrap .receive li {
		height: 0.88rem;
		line-height: 0.88rem;
	}
	
	button {
		width: 9.46rem;
		height: 1.3rem;
		background: #a30000;
		border: none;
		color: #fff;
		margin: 1.04rem 0.26rem;
		font-size: 0.4rem;
		border-radius: 0.1rem;
	}
	
	.return-record {
		margin: 0.26rem;
		background: #fff;
		border-radius: 0.26rem;
		padding: 0 0.26rem;
	}
	
	.return-record h2 {
		height: 1.17rem;
		line-height: 1.17rem;
		text-align: center;
	}
	
	.return-record .title {
		height: 1.06rem;
		line-height: 1.06rem;
		overflow: hidden;
	}
	
	.return-record .title th {
		float: left;
		font-size: 0.34rem;
		color: #222;
		text-align: left;
	}
	
	.return-record .name {
		width: 2.98rem;
	}
	
	.return-record .reason {
		width: 3.62rem;
	}
	
	.return-record .time {
		width: 2.32rem;
	}
	
	.return-record .desc {
		display: flex;
		height: 0.88rem;
		line-height: 0.88rem;
	}
	
	.return-record .desc td {
		font-size: 0.34rem;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.return-address {
		margin-top: 0.26rem;
		background: #fff;
		padding: 0 0.26rem;
	}
	
	.return-address h2 {
		height: 1.17rem;
		line-height: 1.17rem;
		font-size: 0.4rem;
		color: #222;
	}
	
	.return-address .receive-name {
		padding-top: 0.4rem;
		color: #666;
		font-size: 0.37rem;
		margin-bottom: 0.13rem;
	}
	
	.return-address .receive-name span {
		margin-left: 0.56rem;
	}
	
	.return-address .receive-add {
		padding-bottom: 0.4rem;
		color: #666;
		font-size: 0.37rem;
	}
</style>
<style>
	#SellerReturn .reason-wrap .weui-cell:before,
	#SellerReturn .reason-wrap .weui-cell:after {
		border: none!important;
	}
</style>